<div *nzModalTitle> {{ isEdit ? ('mxk.text.edit' | i18n) : ('mxk.text.add' | i18n) }} </div>
<div>
    <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
        <nz-tabset>
            <nz-tab nzTitle="{{ 'mxk.organizations.tab.basic' | i18n }}">
                <nz-form-item style="display: none">
                    <nz-form-label [nzMd]="6" nzFor="id">{{ 'mxk.text.id' | i18n }}</nz-form-label>
                    <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid id!">
                        <input [(ngModel)]="form.model.id" disabled="{{ isEdit }}"
                            [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="columnName">{{ 'mxk.columns.columnName' |
                        i18n }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid tableName!">
                        <input [(ngModel)]="form.model.columnName" [ngModelOptions]="{ standalone: true }" nz-input
                            name="columnName" id="columnName" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="comments">{{ 'mxk.columns.comments' | i18n
                        }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid comments!">
                        <input [(ngModel)]="form.model.comments" [ngModelOptions]="{ standalone: true }" nz-input
                            name="comments" id="comments" />
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dataType">{{ 'mxk.columns.dataType' | i18n
                        }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid dataType!">
                        <nz-select [(ngModel)]="form.model.dataType" [ngModelOptions]="{ standalone: true }"
                            nzAllowClear nzPlaceHolder="{{ form.model.dataType }}" nzShowSearch>
                            <nz-option-group nzLabel="BASIC">
                                <nz-option nzValue="VARCHAR" nzLabel="VARCHAR"></nz-option>
                                <nz-option nzValue="INTEGER" nzLabel="INT/INTEGER"></nz-option>
                                <nz-option nzValue="NUMBER" nzLabel="NUMBER"></nz-option>
                                <nz-option nzValue="FLOAT" nzLabel="FLOAT"></nz-option>
                                <nz-option nzValue="DOUBLE" nzLabel="DOUBLE"></nz-option>
                                <nz-option nzValue="DATETIME" nzLabel="DATETIME"></nz-option>
                            </nz-option-group>
                            <nz-option-group nzLabel="NUMBER">
                                <nz-option nzValue="TINYINT" nzLabel="TINYINT"></nz-option>
                                <nz-option nzValue="SMALLINT" nzLabel="SMALLINT"></nz-option>
                                <nz-option nzValue="MEDIUMINT" nzLabel="MEDIUMINT"></nz-option>
                                <nz-option nzValue="BIGINT" nzLabel="BIGINT"></nz-option>
                                <nz-option nzValue="FLOAT" nzLabel="FLOAT"></nz-option>
                                <nz-option nzValue="DOUBLE" nzLabel="DOUBLE"></nz-option>
                                <nz-option nzValue="DECIMAL" nzLabel="DECIMAL"></nz-option>
                            </nz-option-group>
                            <nz-option-group nzLabel="TEXT">
                                <nz-option nzValue="CHAR" nzLabel="CHAR"></nz-option>
                                <nz-option nzValue="TINYTEXT" nzLabel="TINYTEXT"></nz-option>
                                <nz-option nzValue="TEXT" nzLabel="TEXT"></nz-option>
                                <nz-option nzValue="MEDIUMTEXT" nzLabel="MEDIUMTEXT"></nz-option>
                                <nz-option nzValue="LONGTEXT" nzLabel="LONGTEXT"></nz-option>
                                <nz-option nzValue="TINYBLOB" nzLabel="TINYBLOB"></nz-option>
                                <nz-option nzValue="BLOB" nzLabel="BLOB"></nz-option>
                                <nz-option nzValue="MEDIUMBLOB" nzLabel="MEDIUMBLOB"></nz-option>
                                <nz-option nzValue="LONGBLOB" nzLabel="LONGBLOB"></nz-option>
                            </nz-option-group>
                            <nz-option-group nzLabel="DATE">
                                <nz-option nzValue="DATE" nzLabel="DATE"></nz-option>
                                <nz-option nzValue="TIME" nzLabel="TIME"></nz-option>
                                <nz-option nzValue="YEAR" nzLabel="YEAR"></nz-option>
                                <nz-option nzValue="TIMESTAMP" nzLabel="TIMESTAMP"></nz-option>
                            </nz-option-group>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="dataLength">{{ 'mxk.columns.dataLength' | i18n }}
                    </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid dataLength!">
                        <nz-input-number [(ngModel)]="form.model.dataLength" [ngModelOptions]="{ standalone: true }"
                            nz-input name="dataLength" id="dataLength"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="dataLength">{{ 'mxk.columns.dataScale' | i18n }}
                    </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid dataScale!">
                        <nz-input-number [(ngModel)]="form.model.dataScale" [ngModelOptions]="{ standalone: true }"
                            nz-input name="dataScale" id="dataScale"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="defaultValue">{{ 'mxk.columns.defaultValue' | i18n }}
                    </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid defaultValue!">
                        <input [(ngModel)]="form.model.defaultValue" [ngModelOptions]="{ standalone: true }" nz-input
                            name="defaultValue" id="defaultValue" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="primaryKey">{{ 'mxk.columns.primaryKey' |
                        i18n }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid primaryKey!">
                        <nz-radio-group [(ngModel)]="form.model.primaryKey" [ngModelOptions]="{ standalone: true }"
                            nzButtonStyle="solid">
                            <label nz-radio-button nzValue="YES">{{ 'mxk.text.yes' | i18n }}</label>
                            <label nz-radio-button nzValue="NO">{{ 'mxk.text.no' | i18n }}</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="isNotNull">{{ 'mxk.columns.isNotNull' | i18n
                        }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid isNotNull!">
                        <nz-radio-group [(ngModel)]="form.model.isNotNull" [ngModelOptions]="{ standalone: true }"
                            nzButtonStyle="solid">
                            <label nz-radio-button nzValue="YES">{{ 'mxk.text.yes' | i18n }}</label>
                            <label nz-radio-button nzValue="NO">{{ 'mxk.text.no' | i18n }}</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="isUnique">{{ 'mxk.columns.isUnique' | i18n
                        }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid isUnique!">
                        <nz-radio-group [(ngModel)]="form.model.isUnique" [ngModelOptions]="{ standalone: true }"
                            nzButtonStyle="solid">
                            <label nz-radio-button nzValue="YES">{{ 'mxk.text.yes' | i18n }}</label>
                            <label nz-radio-button nzValue="NO">{{ 'mxk.text.no' | i18n }}</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="autoIncrement">{{
                        'mxk.columns.autoIncrement' | i18n }} </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid autoIncrement!">
                        <nz-radio-group [(ngModel)]="form.model.autoIncrement" [ngModelOptions]="{ standalone: true }"
                            nzButtonStyle="solid">
                            <label nz-radio-button nzValue="YES">{{ 'mxk.text.yes' | i18n }}</label>
                            <label nz-radio-button nzValue="NO">{{ 'mxk.text.no' | i18n }}</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sortIndex">{{ 'mxk.text.sortIndex' | i18n }}
                    </nz-form-label>
                    <nz-form-control [nzSm]="18" [nzMd]="18" [nzXs]="36" [nzXl]="48"
                        nzErrorTip="The input is not valid sortIndex!">
                        <input [(ngModel)]="form.model.sortIndex" [ngModelOptions]="{ standalone: true }" nz-input
                            name="sortIndex" id="sortIndex" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status">{{ 'mxk.text.status' | i18n }}</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid status!">
                        <nz-switch [(ngModel)]="form.model.switch_status" [ngModelOptions]="{ standalone: true }"
                            name="status" [nzCheckedChildren]="checkedTemplate"
                            [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
                        <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
                        <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
                    </nz-form-control>
                </nz-form-item>
            </nz-tab>
        </nz-tabset>
    </form>
</div>

<div *nzModalFooter>
    <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
    <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
</div>